<template>
  <div class="settings-security">
    <a-card class="settings-card">
      <template #title>商户安全设置</template>
      <a-list>
        <a-list-item>
          <div class="security-item">
            <div class="security-info">
              <div class="security-title"><icon-safe /> 交易安全</div>
              <div class="security-desc">设置交易相关的安全选项</div>
            </div>
            <div class="security-action">
              <a-switch v-model="securitySettings.transactionVerification" />
            </div>
          </div>
        </a-list-item>

        <a-list-item>
          <div class="security-item">
            <div class="security-info">
              <div class="security-title"><icon-notification /> 异常通知</div>
              <div class="security-desc">账户出现异常操作时通知商家</div>
            </div>
            <div class="security-action">
              <a-switch v-model="securitySettings.abnormalNotification" />
            </div>
          </div>
        </a-list-item>

        <a-list-item>
          <div class="security-item">
            <div class="security-info">
              <div class="security-title"><icon-lock /> 店铺保护</div>
              <div class="security-desc">
                开启后需要验证身份才能修改店铺重要信息
              </div>
            </div>
            <div class="security-action">
              <a-switch v-model="securitySettings.shopProtection" />
            </div>
          </div>
        </a-list-item>

        <a-list-item>
          <div class="security-item">
            <div class="security-info">
              <div class="security-title"><icon-key /> 操作授权</div>
              <div class="security-desc">设置店铺管理员操作权限</div>
            </div>
            <div class="security-action">
              <a-button type="text" @click="handleManagePermissions">
                管理权限
              </a-button>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>

    <!-- 权限管理弹窗 -->
    <a-modal
      v-model:visible="showPermissionsModal"
      title="操作权限管理"
      @ok="handleSavePermissions"
      @cancel="closePermissionsModal"
    >
      <a-form :model="permissionsForm" layout="vertical">
        <a-form-item field="orderManagement" label="订单管理">
          <a-checkbox-group v-model="permissionsForm.orderManagement">
            <a-checkbox value="view">查看订单</a-checkbox>
            <a-checkbox value="process">处理订单</a-checkbox>
            <a-checkbox value="refund">退款处理</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item field="productManagement" label="商品管理">
          <a-checkbox-group v-model="permissionsForm.productManagement">
            <a-checkbox value="view">查看商品</a-checkbox>
            <a-checkbox value="edit">编辑商品</a-checkbox>
            <a-checkbox value="price">价格调整</a-checkbox>
            <a-checkbox value="stock">库存管理</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item field="financeManagement" label="财务管理">
          <a-checkbox-group v-model="permissionsForm.financeManagement">
            <a-checkbox value="view">查看账单</a-checkbox>
            <a-checkbox value="withdraw">提现操作</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item field="settingManagement" label="设置管理">
          <a-checkbox-group v-model="permissionsForm.settingManagement">
            <a-checkbox value="view">查看设置</a-checkbox>
            <a-checkbox value="edit">修改设置</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconSafe,
  IconNotification,
  IconLock,
  IconKey,
} from "@arco-design/web-vue/es/icon";

const securitySettings = reactive({
  transactionVerification: true,
  abnormalNotification: true,
  shopProtection: true,
});

const showPermissionsModal = ref(false);
const permissionsForm = reactive({
  orderManagement: ["view"],
  productManagement: ["view"],
  financeManagement: ["view"],
  settingManagement: ["view"],
});

const handleManagePermissions = () => {
  showPermissionsModal.value = true;
};

const handleSavePermissions = () => {
  // 保存权限设置
  Message.success("权限设置已保存");
  showPermissionsModal.value = false;
};

const closePermissionsModal = () => {
  showPermissionsModal.value = false;
};
</script>

<style lang="scss" scoped>
.settings-security {
  .security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;

    .security-info {
      flex: 1;
      margin-right: 16px;

      .security-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;

        :deep(.arco-icon) {
          margin-right: 8px;
        }
      }

      .security-desc {
        color: var(--color-text-3);
        font-size: 14px;
      }
    }
  }
}
</style>
